<template>
  <div class="my">
    <!-- 第一部分 -->
    <div class="header">
      <div class="headerone">
        <div class="hdleft">
          <div class="fl1">续命咖啡</div>
          <div class="fl2">面试不求人，我有面试宝典</div>
        </div>
        <div class="hdright">
          <div class="imghr"><img src="" alt="" /></div>
        </div>
      </div>
      <div class="headernav">
        <div class="navbox">
          <span class="nav-boxone nav-queation">298</span>
          <span class="nav-boxtwo">累计答题</span>
        </div>
        <div class="navbox">
          <span class="nav-boxone">98</span>
          <span class="nav-boxtwo">收藏题目</span>
        </div>
        <div class="navbox">
          <span class="nav-boxone">198</span>
          <span class="nav-boxtwo">我的错题</span>
        </div>
        <div class="navbox">
          <span class="nav-boxone"
            >76
            <span class="percentage">%</span>
          </span>
          <span class="nav-boxtwo">正确率</span>
        </div>
      </div>
    </div>
    <!-- 第二部分 -->
    <div class="cell">
      <van-cell-group>
        <!-- <van-cell title="标题"></van-cell> -->
        <!-- <van-cell title="跳转" is-link :border="false"></van-cell> -->
        <van-cell title="标题" value="21">
          <template #icon>
            <i class="iconfont iconicon_mine_tikushoucang"></i>
          </template>
          <template #right-icon>
            <i class="iconfont iconicon_more"></i>
          </template>
        </van-cell>
        <van-cell title="标题"></van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less">
.my {
  .header {
    height: 260px;
    background: linear-gradient(45deg, #ce0031, #b8002c);
    .headerone {
      padding-top: 75px;
      margin: 0 15px;
      display: flex;
      .hdleft {
        flex: 1;
        .fl1 {
          height: 30px;
          font-size: 21px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          line-height: 30px;
        }
        .fl2 {
          width: 146px;
          height: 17px;
          opacity: 0.7;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          line-height: 17px;
        }
      }
      .hdright {
        flex: 1;
        .imghr {
          float: right;
          margin-right: 15px;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 3px solid rgba(255, 255, 255, 0.38);
        }
      }
    }
    .headernav {
      display: flex;
      .navbox {
        flex: 25%;
        text-align: center;
        margin-top: 30px;

        .nav-boxone {
          display: block;
          font-size: 21px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          text-align: center;
          color: #ffffff;
          line-height: 30px;
          text-align: center;
          .percentage {
            font-size: 21px;
            font-family: PingFangSC, PingFangSC-Semibold;
          }
        }
        .nav-queation {
          font-family: DINAlternate, DINAlternate-Bold;
          font-weight: 500;
        }
        .nav-boxtwo {
          display: block;
          opacity: 0.7;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
